import React, { Component } from 'react'
import { Card, Select, Row, Col, Modal  } from 'antd'

import $ from 'jquery'
import style from './index.scss'


const Option = Select.Option;
  
export default class Health extends Component {
    constructor(props) {
        super(props);
        this.state = {
            diskSpace: {
                details: {
                    total: null,
                    free: null,
                    threshold: null
                },
                status: {
                    code: null,
                    description: null
                }
            },
            redis: {
                details: {
                    version: null
                },
                status: {
                    code: null,
                    description: null
                }
            },
            db: {
                details: {
                    database: null,
                    hello: null
                },
                status: {
                    code: null,
                    description: null
                }
            },
            address: '',
        }
        this.modules = [];
        this.nowModule = '';

        this.getInfoAdress();
    }

    getInfoAdress = () => {
        $.ajax({
            url: '/base/expose/monitor/address',
            type: 'get',
            success: (resdata) => {
                this.setState({
                    address: resdata.address
                });
                this.getInfoModules();
            },
        });
    }

    getInfoModules = () => {
        $.ajax({
            url: '/base/expose/modules',
            type: 'get',
            success: (resdata) => {
                this.modules = resdata;
                this.nowModule = resdata[0];
                this.getInfo();
            }
        });
    }

    getInfo = () => {
        $.ajax({
            url: 'http://' + this.state.address + '/monitor/main/health/' + this.nowModule,
            type: 'get',
            success: (resdata) => {
                let key = '$ref';
                if (key in resdata.details.redis.status) {
                    resdata.details.redis.status.code = resdata.details.diskSpace.status.code;
                }
                if (key in resdata.details.db.status) {
                    resdata.details.db.status.code = resdata.details.diskSpace.status.code;
                }
                this.setState({
                    diskSpace: resdata.details.diskSpace,
                    redis: resdata.details.redis,
                    db: resdata.details.db,
                });
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                Modal.error({
                    title: '错误提示',
                    content: "数据获取失败，请重新发起请求",
                });
            }
        });
    }

    handleChange = (value) => {
        this.nowModule = value;
        this.getInfo();
    }

    render() {
        let optionItem;
        if (this.modules.length > 0) {
            optionItem = this.modules.map((item, index) => {
                return <Option key={index} value={item}>{item}</Option>
            })
        } else {
            optionItem = <Option value=""></Option>
        }
        return (
            <div className={style.health}>
                <Row>
                    <Col span={5} offset={18}>
                        <Select defaultValue="base" style={{ width: '100%' }} onChange={this.handleChange}>
                            {optionItem}
                        </Select>
                    </Col>
                </Row>

                <Card title="磁盘空间" bordered={false}>
                    <p><span className={style.pLabel}>磁盘总空间：</span> {Math.round(this.state.diskSpace.details.total / 1024 / 1024)} MB</p>
                    <p><span className={style.pLabel}>磁盘剩余空间：</span> {Math.round(this.state.diskSpace.details.free / 1024 / 1024)} MB</p>
                    <p><span className={style.pLabel}>磁盘阈值：</span>{Math.round(this.state.diskSpace.details.threshold / 1024 / 1024)} MB</p>
                    <p><span className={style.pLabel}>状态：</span> {this.state.diskSpace.status.code == 'UP' ? "正常" : "异常"}</p>
                </Card>
                <Card title="Redis数据库" bordered={false}>
                    <p><span className={style.pLabel}>版本：</span>{this.state.redis.details.version}</p>
                    <p><span className={style.pLabel}>状态：</span>{this.state.redis.status.code == 'UP' ? "正常" : "异常"}</p>
                </Card>
                <Card title="DB数据库" bordered={false}>
                    <p><span className={style.pLabel}>数据库：</span>{this.state.db.details.database}</p>
                    <p><span className={style.pLabel}>状态：</span>{this.state.db.status.code == 'UP' ? "正常" : "异常"}</p>
                </Card>
            </div>
        )
    }
}
